<template>
  <div>
    <h1 class="text-3xl font-bold text-neutral-700">滑块验证</h1>
    <show-code-box class="mb-[4rem]">
      <template #example>
        <div class="flex items-center p-[1rem]">
          <slider-verify ref="slider" v-model:status="status" @on-success="successHandler" />
          <el-button class="ml-[20px]" @click="resetVerify">重置</el-button>
        </div>
      </template>
      <template #code>
        <pre>
          <code class="language-html text-sm mt-[-20px] mb-[-50px]">
            &lt;SliderVerify ref="slider" v-model:status="status" @on-success="successHandler"/&gt;
            &lt;el-button class="ml-[1rem]" @click="resetVerify"/&gt;重置&lt;/el-button/&gt;
            &lt;script setup lang="ts"&gt;
              const slider = ref()
              const status = ref(false)
              const successHandler = () => {
                ElMessage.success('验证成功')
              }
              const resetVerify = () => {
                slider.value.reset()
              }
            &lt;/script&gt;
            </code>
          </pre>
      </template>
    </show-code-box>
    <how-to-use-table :how-to-use="howToUse" />
  </div>
</template>

<script setup lang="ts">
  import highlight from 'highlight.js'
  definePageMeta({
    title: '滑块验证',
    hideInMenu: false
  })
  useHead({
    title: '滑块验证'
  })
  onMounted(() => {
    highlight.highlightAll()
  })

  const slider = ref()
  const status = ref(false)
  const successHandler = () => {
    ElMessage.success('验证成功')
  }
  const resetVerify = () => {
    slider.value.reset()
  }

  const howToUse = ref([
    {
      propName: 'v-model:status',
      mean: '验证状态',
      type: 'boolean',
      default: 'false'
    },
    {
      propName: 'width',
      mean: '组件宽度,最小180px',
      type: 'string',
      default: '250px'
    },
    {
      propName: '@on-success',
      mean: '验证成功时触发',
      type: 'function',
      default: '-'
    },
    {
      propName: 'reset',
      mean: '组件方法,重置状态(获取组件dom,调用reset方法)',
      type: 'function',
      default: '-'
    }
  ])
</script>
